<template>
  <a-card>
    <a-form
        ref="searchForm"
        :model="state.condition"
        layout="inline"
    >
      <a-form-item label="请求地址">
        <a-input v-model="state.condition.requestPath"/>
      </a-form-item>
      <a-form-item label="耗时【毫秒】">
        <a-input-number v-model="state.condition.timeMillisMin"/>
        -
        <a-input-number v-model="state.condition.timeMillisMax"/>
      </a-form-item>
      <a-form-item label="操作时间">
        <v-range-picker v-model:start="state.condition.operateTimeStart" v-model:end="state.condition.operateTimeEnd"/>
      </a-form-item>
      <a-form-item>
        <a-button
            type="primary"
            @click="search"
        >
          查询
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-button
            type="reset"
            @click="reset"
        >
          重置
        </a-button>
      </a-form-item>
    </a-form>
    <a-table
        :loading="loading"
        :columns="columns"
        :data-source="list"
        :pagination="pagination"
        @change="handleChange"
        row-key="id"
        style="margin-top: 50px;"
    >
      <template #expandedRowRender="{record}">
        {{ record.description }}
        <a-descriptions bordered>
          <a-descriptions-item label="操作用户id">
            {{ record.userId }}
          </a-descriptions-item>
          <a-descriptions-item label="请求java方法">
            {{ record.methodName }}
          </a-descriptions-item>
          <a-descriptions-item label="请求参数">
            {{ record.requestParamMap }}
          </a-descriptions-item>
          <a-descriptions-item label="请求body">
            {{ record.requestBody }}
          </a-descriptions-item>
        </a-descriptions>
      </template>
    </a-table>
  </a-card>
</template>

<script lang="ts" setup>
import { usePagination } from '@/modules/use-modules'
import { PageParam } from '@/config/common'
import { getLogs } from '@/api/sys-log'
import VRangePicker from '@/components/VRangePicker.vue'
import { reactive } from 'vue'

const columns = [
  {
    title: '请求地址',
    dataIndex: 'requestPath',
    sorter: true
  },
  {
    title: '请求方式',
    dataIndex: 'requestMethod'
  },
  {
    title: '操作时间',
    dataIndex: 'operateTime'
  },
  {
    title: '耗时【毫秒】',
    dataIndex: 'timeMillis',
    sorter: true
  },
  {
    title: 'IP',
    dataIndex: 'ip'
  },
  // {
  //   title: '操作用户ID',
  //   dataIndex: 'userId'
  // },
  {
    title: '操作用户账号',
    dataIndex: 'username'
  },
  {
    title: '日志内容',
    dataIndex: 'content'
  }
  // {
  //   title: '请求参数',
  //   dataIndex: 'requestParamMap'
  // },
  // {
  //   title: '请求java方法',
  //   dataIndex: 'methodName'
  // },
]

const state = reactive({
  condition: {
    requestPath: '',
    timeMillisMin: null,
    timeMillisMax: null,
    operateTimeStart: null,
    operateTimeEnd: null
  }
})

const {
  pagination,
  loading,
  list,
  handleChange,
  loadData,
  search
} = usePagination<any>((page: PageParam) => {
  return getLogs(page, { ...state.condition })
})

const reset = () => {
  state.condition = {
    requestPath: '',
    timeMillisMin: null,
    timeMillisMax: null,
    operateTimeStart: null,
    operateTimeEnd: null
  }
  search()
}

loadData()
</script>
